<template>
    <div class="adminWrapper">
        <!-- 头部开始 -->
        <Headers :navdata="navData"></Headers>
        <!-- 头部结束 -->
        <div class="clearfix"></div>
        <div class="page-container">
            <!-- 侧边导航开始 -->
            <Bars @changeNavData="transmitData"></Bars>
            <!-- 侧边导航结束 -->
            <!-- 正文开始;ajax请求内容 -->
            <div class="page-content-wrapper">
                <div class="page-content">
                    <transition name="router-fade" mode="out-in">
                        <router-view></router-view>
                    </transition>
                </div>
            </div>
            <!-- 正文结束;ajax请求内容 -->

        </div>
        <!-- 底部开始 -->
        <Foot></Foot>
        <!-- 底部结束 -->
        <!-- <router-view></router-view> -->
    </div>
</template>

<!-- 整合所有页面bug的样式 start -->
<style>
    body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, li, a, p, h1, h2, h3, h4, h5, i, b, textarea, button, input, select {
        padding: 0;
        margin: 0;
        list-style: none;
        font-style: normal;
        text-decoration: none;
        border: none;
        /*color: #313131;*/
        box-sizing: border-box;
        font-weight: lighter;
        font-family: 'Microsoft YaHei';
        -webkit-tap-highlight-color: transparent;
        outline: none;

    &
    :focus {
        outline: none;
    }

    }
    a {
        color: #313131;
    }

    /*.el-cascader-menus{
      transition: 0s !important;
    }*/

    html {
        height: 100%;
        width: 100%;
    }

    body {
        height: 100%;
        width: 100%;

        background-size: 100% 100%;
    }

    .clear:after {
        content: '';
        display: block;
        clear: both;
    }

    .clear {
        zoom: 1;
    }

    .back_img {
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .margin {
        margin: 0 auto;
    }

    .left {
        float: left;
    }

    .right {
        float: right;
    }

    .hide {
        display: none;
    }

    .show {
        display: block;
    }

    body {
        color: #333;
        font-family: "Open Sans", sans-serif;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 13px;
        direction: ltr
    }

    @-ms-viewport {
        width: device-width
    }

    @-o-viewport {
        width: device-width
    }

    @viewport {
        width: device-width
    }

    @-ms-viewport {
        width: auto !important
    }

    .block {
        text-align: center;
        margin: 15px 0;
    }

    .el-date-editor.el-input {
        width: 100%;
    }

    .myBgGreen span {
        color: #fff;
    }

    table, table div {
        text-align: center;
    }

    .el-button + .el-button {
        margin-left: 0;
    }

    .page-content-wrapper {
        background: #eef2f5;
        position: relative;
    }

    .page-content {
        margin-left: 235px;
        margin-top: 90px;
        box-sizing: border-box;
        position: relative;
    }

    .myBgGreen {
        margin-top: 0 !important;
    }

    .el-cascader, .el-input {
        width: 100%;
    }

    .el-menu {
        border-radius: 2px;
        list-style: none;
        position: relative;
        margin: 0;
        padding-left: 0;
        background-color: #eef1f6;
        border-right: none;
    }

    .el-tree {
        cursor: default;
        background: #fff;
        /*border: 1px solid #d1dbe5;*/
    }

    .el-tree-node__content {
        line-height: 36px;
        height: 36px;
        cursor: pointer;
    }

    .look span, .modifly span {
        color: #00c2a9 !important;
        font-weight: 500;
    }

    .look.primary span, .el-button--text.primary span {
        color: #409eff !important;
        font-weight: 500;
    }

    .look.warning span {
        color: #eb9e05 !important;
        font-weight: 500;
    }

    .el-table th {
        background-color: #eef1f6;
    }

    .el-select {
        width: 100%;
    }

    .page-content-wrapper .page-content {
        padding: 11px 20px !important;
    }

    .myRoleDialog > .el-dialog {
        width: 500px;
    }

    .router-fade-enter-active, .router-fade-leave-active {
        transition: opacity .4s;
    }

    .router-fade-enter, .router-fade-leave-active {
        opacity: 0;
    }

    .el-button--small {
        padding: 0;
        font-size: 12px;
        border-radius: 4px;
    }

    .el-checkbox__input.is-checked .el-checkbox__inner, .el-radio__input.is-checked .el-radio__inner {
        background: #33ceba;
        border-color: #33ceba;
    }

    .el-radio__input.is-checked + .el-radio__label {
        color: #33ceba;
    }

    .el-checkbox__input.is-checked .el-checkbox__inner {
        background: #33ceba;
        border-color: #33ceba;
    }

    .el-checkbox__input.is-focus .el-checkbox__inner {
        border-color: #33ceba;
    }

    .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
        color: #33ceba;
    }

    .el-tabs--border-card > .el-tabs__header .el-tabs__item:hover {
        color: #33ceba;
    }

    .my input[type=file] {
        display: none;
    }

    .myNavBox .myLeftContainer, .myNavBox .el-menu {
        background: #364150;
        border-right: none;
    }

    .myNavBox span {
        color: #fff !important;
        display: block;
    }

    .myNavBox .el-menu--horizontal.el-menu--dark .el-submenu .el-menu-item.is-active, .el-menu-item.is-active {
        color: #fff;
        background: #59687d;
    }

    .myNavBox {
        background: #59687d;
        height: 100%;
        /*overflow-y: hidden;*/
    }

    .myNavBox img[src="../../"] {
        display: none;
    }

    .myNavBox .el-menu-item img {
        vertical-align: text-top;
    }

    .require {
        color: #f00;
    }

    .el-message-box .el-button--small {
        padding: 9px 15px;
    }

    .el-message-box .el-button--primary, .el-button--primary span {
        color: #fff;
    }

    .adminWrapper {
        min-width: 1280px;
        overflow: hidden;
    }

    .myColorRed, .myColorRed span {
        color: #f00;
    }

    .myBtn span {
        color: #fff;
    }

    .el-form-item__error {
        top: 50%;
        margin-top: -9px;
        left: auto;
        right: 10px;
    }

    .el-form-item {
        margin-bottom: 1;
    }

    .ql-editor {
        min-height: 200px;
        max-height: 400px;
        overflow-y: scroll;
    }

    .myIframe .el-dialog {
        width: 454px;
        overflow: hidden;
        height: 800px;
        margin-top: 8vh !important;
    }

    .myScrollBox .el-menu-item:focus, .el-menu-item:hover {
        background-color: #59687d;
        color: #fff;
    }

    .myScrollBox .el-submenu__title:hover {
        background-color: #59687d;
        color: #fff;
    }

    .my .el-upload-list--picture .el-upload-list__item {
        width: 92px;
        float: left;
        margin-right: 10px;
    }

    .my .el-upload-list--picture .el-upload-list__item-thumbnail {
        margin-left: -75px;
    }

    .my .el-upload-list__item.is-success .el-upload-list__item-status-label {
        z-index: 1;
    }

    .my .el-upload-list--picture .el-upload-list__item.is-success .el-upload-list__item-name {
        display: none;
    }

    .my .el-input__inner {
        border: none;
        padding: 0;
    }

    .mode_1-1 .el-input__inner, .myModelItem_1_8_1 .el-input__inner, .myModelItem_1_8_2 .el-input__inner {
        text-align: center;
    }

    .myModelItem_1_5_2 textarea, .myModelItem_1_5_4 textarea {
        height: 240px !important;
    }

    .myModelItem_1_6_2 textarea {
        height: 180px !important;
    }

    .my .el-table__body-wrapper::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    .mynhgl .el-dialog {
        width: 730px;
    }

    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    .el-table__body-wrapper {
        overflow: auto !important;
    }

    .el-range-editor.el-input__inner {
        width: 100%;
    }

    .vjs-control-bar, .vjs-big-play-button, .vjs-error-display, .vjs-modal-dialog, .vjs-hidden, .vjs-modal-dialog, .vjs-text-track-settings {
        display: none;
    }

    .vjs-tech {
        width: auto;
        height: 600px;
        position: relative;
        left: -50%;
    }

    .my .el-tag {
        margin: 10px 0 0 10px;
    }

    .vue-highcharts {
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .myBill .el-dialog__body {
        padding: 0 20px 0 20px;
    }

    .myExportDlg .el-dialog {
        width: 600px;
    }

    .myExportDlg .el-checkbox__input.is-checked + .el-checkbox__label {
        color: #33ceba !important;
        z-index: 1;
        position: relative;
    }

    .myExportDlg .el-checkbox__label {
        position: relative;
        z-index: 1;
    }

    .myTitleBorderBottom {
        padding-bottom: 5px;
    }

    .zcgl .el-submenu .el-menu-item {
        margin-left: 29px;
    }

    .treeContainer .el-menu {
        background-color: #fff;
    }

    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #33ceba;
        border-color: #33ceba;
    }

    .RepairDigTab .el-input__inner, .RepairDigTab .el-textarea__inner {
        border: none;
    }

    .asset .el-tree-node.is-expanded.is-current {
        background-color: #f5f7fa;
    }

    .asset .el-tree-node.is-expanded {
        background-color: #fff;
    }

    #qrcode img {
        margin: 0 auto;
    }

    .el-menu-item:focus, .el-menu-item:hover {
        background-color: #59687d !important;
        color: #fff;
    }

    .mydlg .el-dialog__headerbtn {
        display: none;
    }

    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: auto !important;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 33.33% !important;
        float: left !important;
        text-align: left !important;
    }

    .el-tooltip__popper span {
        color: #fff;
    }

    .el-table td, .el-table th.is-leaf {
        border-bottom: 1px solid #e6ebf5 !important;
    }

    .el-table--border, .el-table--group {
        border: 1px solid #e6ebf5 !important;
    }
</style>
<!-- 整合所有页面bug的样式 end -->
<script>
    import $ from 'jquery';
    import '../../static/global/plugins/jquery-ui/jquery-ui.min.js';
    import '../../static/global/plugins/bootstrap/js/bootstrap.min.js';

    import Headers from 'components/Headers.vue';
    import Bars from 'components/Bars.vue';
    import Foot from 'components/Foot.vue';

    export default {
        data() {
            return {
                navData: []
            }
        },
        components: {
            Headers, Bars, Foot
        },
        mounted() {
            $(".page-content").css("min-height", $(window).height() - 123);
            $(window).resize(function () {
                $(".page-content").css("min-height", $(window).height() - 123);
            })
        },
        methods: {
            transmitData(data) {
                this.navData = data;
            }
        }
    }

</script>

